<template>
<div>
    <el-collapse accordion>
    <el-collapse-item style="padding-left:10px;">
        <template slot="title">
        生成盘点单说明<i class="header-icon el-icon-info"></i>
        </template>
        <div>与现实生活一致：与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念；</div>
        <div>在界面中一致：所有的元素和结构需保持一致，比如：设计样式、图标和文本、元素的位置等。</div>
    </el-collapse-item>
    </el-collapse>
    <section style="padding:10px 10px;">
         <el-form :model="addForm" size="small" :label-position="left" label-width="100px">
              <el-row  :gutter="20"> 
                <el-col :span="8">
                     <el-form-item label="盘点名称">
                       <el-input v-model="addForm.name" placeholder="盘点名称" ></el-input>
                    </el-form-item>
                </el-col>  
                <el-col :span="8"> 
                    <el-form-item label="盘点负责人">
                       <el-input v-model="addForm.name" placeholder="盘点负责人" ></el-input>
                    </el-form-item>
                </el-col>  
                 <el-col :span="8"> 
                    <router-link to="/staticasset/check" class="sp"><span><font-awesome-icon :icon="['fa','arrow-left']"/>返回</span></router-link>
                 </el-col> 
                  </el-row>
                <el-row>
                     <el-col :span="8">
                    <el-form-item label="创建人">
                       <el-input v-model="addForm.name" placeholder="创建人" ></el-input>
                    </el-form-item> 
                </el-col> 
                </el-row>
                 <el-row>
                     <el-col>
                         <span class="spanW">是否允许员工自行盘点&nbsp;</span>
                                 <el-radio v-model="radio" label="1">否</el-radio>
                                 <el-radio v-model="radio" label="2">是</el-radio>
                                 &nbsp;  &nbsp;  &nbsp;  &nbsp;
                                 <el-popover
                                    placement="top-start"
                                    title="说明"
                                    width="220"
                                    trigger="hover"
                                    content="如果为是，则资产使用人（员工）可以自行通过设备完成盘点，否则需要盘点负责人完成盘点。"> 
                                    <i slot="reference" class="el-icon-info"></i>
                                </el-popover>
                     </el-col>
                </el-row>
         </el-form>
        <span >&nbsp;</span>
        <el-tabs v-model="activeName" @tab-click="handleClick">
                <el-tab-pane label="公司/部门盘点" name="first"> 
                    <el-row  :gutter="20">  
                        <el-col :span="12" class="sp2"> 
                            <span class="spanW">要盘点部门或公司&nbsp;</span> 
                            <el-input v-model="addForm.name" size="small" placeholder="要盘点部门或公司" ></el-input> 
                        </el-col>
                    </el-row>
                        <el-row  :gutter="20"> 
                        <el-col :span="12" class="sp2"> 
                            <span class="spanW">要盘点资产&nbsp;</span>  
                            <el-input v-model="addForm.name" size="small" placeholder="要盘点资产" ></el-input> 
                        </el-col>
                        </el-row>
                        <el-row  :gutter="20"> 
                        <el-col :span="12" class="sp2">
                            <span class="spanW">入库时间&nbsp;</span>
                                <el-date-picker
                                v-model="value6"
                                type="daterange"
                                size="small"
                                range-separator="至"
                                start-placeholder="开始日期"
                                end-placeholder="结束日期">
                                </el-date-picker>
                        </el-col> 
                        </el-row> 
                </el-tab-pane> 
                <el-tab-pane label="员工盘点" name="third">  
                    <el-row  :gutter="20">  
                        <el-col :span="12" class="sp2"> 
                            <span class="spanW">要盘点员工&nbsp;</span> 
                            <el-input v-model="addForm.name" size="small" placeholder="要盘点员工" ></el-input> 
                        </el-col>
                    </el-row>
                        <el-row  :gutter="20"> 
                        <el-col :span="12" class="sp2"> 
                            <span class="spanW">要盘点资产&nbsp;</span>  
                            <el-input v-model="addForm.name" size="small" placeholder="要盘点资产" ></el-input> 
                        </el-col>
                        </el-row>
                        <el-row  :gutter="20"> 
                        <el-col :span="12" class="sp2">
                            <span class="spanW">入库时间&nbsp;</span>
                                <el-date-picker
                                v-model="value6"
                                type="daterange"
                                size="small"
                                range-separator="至"
                                start-placeholder="开始日期"
                                end-placeholder="结束日期">
                                </el-date-picker>
                        </el-col> 
                        </el-row> 
                </el-tab-pane>
        </el-tabs> 

                        <el-button type="primary" size="small" round>&nbsp;生成盘点单&nbsp;</el-button>
    </section>
</div>
</template>

<script>
export default {
  data() {
    return {
        radio: '1',
        value6:'',
        activeName: 'first',
        dialogFormVisible: false,
        addForm: {
            name: ""
        }
    };
  },
  methods: {
      handleClick(){

      }
  }
};
</script>

<style>
.el-form-item__label {
    text-align: left; 
}
.spanW{
    width: 120px;
}
 
.sp {
    text-align: center;
    float: right;;
    font-size: 14px;
    color: #606266;
    line-height: 40px;
    padding: 0 12px 0 0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
} 
.sp2{
    margin-bottom: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
}
</style>

